<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="wpui-admin/wp-ewallet-admin/static/css/style.css" />
		<style>
			body{
				background: #FFFFFF;
				overflow: hidden;
			}
			*{
			margin: 0;
			padding: 0;
			}
			input,img {vertical-align:middle;}
		</style>
	</head>
	<body>
		<div class="login_wrap" id="container">
			<div class="login_bgpic"></div>
			<div class="login_dianzhui"></div>
			<div class="login_input_box">
				<div class="login_tittle"><b>欢迎登录</b></div>
				<div class="login_input_box2">
					<input type="text" v-model="username" maxlength="20" class="login_input" placeholder="请输入您的账户名"/>
					<img src="wpui-admin/wp-ewallet-admin/static/image/zhunaghu.png" class="zhanghu_pic" />
				</div>
				<div class="login_input_box3">
					<input type="password" maxlength="15" v-model="password" class="login_input" placeholder="请输入您的密码"/>
					<img src="wpui-admin/wp-ewallet-admin/static/image/mima.png" class="zhanghu_pic2" />
				</div>
				<div v-show="ruleCheckCode" class="login_input_box3" style="width: 200px;display: none;">
					<input type="text" maxlength="4" v-model="code" class="login_input" placeholder="验证码" style="width: 200px;"/>
					<span style="display: inline;position: relative;top: -45px;left: 210px;">
						<img @click="getCode" id="codeImg" style="cursor: pointer" src="wpui-admin/wp-ewallet-admin/static/image/mima.png">
					</span>
				</div>
				<div class="remembermeBox">
					<div style="display: flex;">
					<div class="rememberme">
						<input type="checkbox" v-model="checked"    />
					</div>记住我
					</div>
				</div>
				<a href="javascript:;" @click="login" class="colorWrite" >
					<div class="login_input_box4 colorWrite">登录</div> 
				</a>
			</div>
		</div>

	</body>

	<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
	<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
	<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
	<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
	<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
	<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
	<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
	<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>

	<script>
        layui.use(['form','layer'], function () {
		    var form = layui.form;
		    var layer = layui.layer;

            var vm = new Vue({
                el: '#container',
                i18n: wp.i18n(),
                data: {
                    username:'',
					password:'',
					userNameStoreKey:'ewallet-username',
					passwordStoreKey:'ewallet-password',
					checked:false,
					checkedStoreKey: '',
					randomStr:'',
					code:'',

					// 允许最大错误次数后锁定账号的单位时间。如1分钟错误20次显示验证码，与ruleMaxErrorCount配合使用， 默认秒
                    rulePerMaxUnit:5,
                    // 单位时间内允许的最大错误次数
                    ruleMaxErrorCount:'3',
					// 重置错误时间,单位秒
					ruleResetErrorCountTime:'10',

                    // 是否校验验证码，默认不校验
                    ruleCheckCode:false,
					// 当前错误次数
					ruleCurrentErrorCount:0,
                    // 第一次错误时间
                    ruleFirstErrorTime:0,
					// 最后一次错误时间
					ruleLastErrorTime:0

                },
                mounted:function(){
					var that = this;
                    // 检查登录状态，如果勾选了记住账号密码，直接登录
                   	this.checkLoginStatus();
					$(document).keydown(function(event){
						if (event.keyCode == 13) {//回车键的键值为13
							that.login();
						}
					});

					that.ruleCheckCode = wp.getValue('ruleCheckCode') == '1';
					that.ruleCurrentErrorCount = Number(wp.getValue('ruleCurrentErrorCount'));
					that.ruleCurrentErrorCount = Number(wp.getValue('ruleFirstErrorTime'));
					that.ruleCurrentErrorCount = Number(wp.getValue('ruleLastErrorTime'));
					that.getCode();
                    that.checkLastLoginErrorTime();

                },
                methods:{
                    checkLoginStatus:function(){
						var that=this;
						//获取checkbox状态
						var checkStatus = wp.getValue(that.checkedStoreKey);
						if(checkStatus){
							that.checked = JSON.parse(checkStatus)[0]; // 默认取第0个
						}
						//如果没有记录账号和免密 清空
						if (!that.checked){
							that.password='';
							that.username='';
						}else{
							//如果记录账号和免密 恢复
							//获取用户的账号
							var storeUserName = wp.getValue(that.userNameStoreKey);
							if(storeUserName){
								that.username = JSON.parse(storeUserName)[0]; // 默认取第0个
							}
						}
					},
					getCode:function(){
                        //产生随机数函数
                        function RndNum(n){
                            var rnd="";
                            for(var i=0;i<n;i++)
                                rnd += Math.floor(Math.random()*10);
                            return rnd;
                        }

                        this.randomStr = ((Math.random() * 9 + 1) * 100000) + "";
                        // 拉取验证码
                        var img = document.getElementById("codeImg");
                        img.src = wp.url("/wp/common/vcode/img?randomStr=" + this.randomStr);
					},
					saveCheck:function(){
						var that = this;
						//保存用户名
						var isChecked = wp.getValue(that.checkedStoreKey);
						if(!isChecked){
							isChecked = new Array();
						}else{
							isChecked = JSON.parse(isChecked);
							var currindex = -1;
							for(var index in isChecked){
								if(isChecked[index] == that.checked){
									has = true;
									currindex = index;
								}
							}
							if(currindex > -1){
								isChecked.splice(currindex,1);
							}
						}
						// 在头部添加
						isChecked.unshift(that.checked);
						wp.storeValue(that.checkedStoreKey,JSON.stringify(isChecked));
					},
					storeAccount:function(){
						var that = this;
						//保存用户名
						var accoutUser = wp.getValue(that.userNameStoreKey);
						if(!accoutUser){
							accoutUser = new Array();
						}else{
							accoutUser = JSON.parse(accoutUser);
							var currindex = -1;
							for(var index in accoutUser){
								if(accoutUser[index] == that.username){
									has = true;
									currindex = index;
								}
							}
							if(currindex > -1){
								accoutUser.splice(currindex,1);
							}
						}
						// 在头部添加
						accoutUser.unshift(that.username);
						wp.storeValue(that.userNameStoreKey,JSON.stringify(accoutUser));
					},
                    login:function(){
						var that= this;
						// 表单校验
                        var checkInput = that.checkUserName() && that.checkPassword()&& that.checkCode();
                        if(!checkInput) return;
                        var waiting = wp.loading("正在登录");
                        wp.httpPost({
							url:wp.url('/wp/ewallet/upms/login/loginAdmin'),
							data:{
								type:"2000",
								username:this.username,
								password:this.password,
								randomStr:that.randomStr,
								code:that.code
							},
							success:function(data){
                                wp.closeLoading(waiting);
                                console.log("userInfo:" + JSON.stringify(data));
                                // 存储Token
                                wp.storeToken(data.dataBody.token);
                                if (that.checked){
									// 缓存账号,可缓存多个,再次登录时自动回填用
									that.storeAccount();
								}

                                // 存储用户
                                wp.storeUser(data.dataBody);
                                that.saveCheck();
								layer.msg("登录成功")

								// 清除验证码检查
                                that.ruleCurrentErrorCount = 0;
                                that.ruleCheckCode = false;

                                wp.removeValue("ruleCheckCode");
                                wp.removeValue("ruleCurrentErrorCount");
                                wp.removeValue("ruleLastErrorTime");
                                wp.removeValue('ruleFirstErrorTime');

								window.location.href = 'index.html';
							},
							failure:function(data){
								wp.closeLoading(waiting);
                                that.getCode();// 刷新验证码

								that.ruleCurrentErrorCount++;
								that.ruleLastErrorTime = new Date().getTime() + '';
								wp.storeValue("ruleCurrentErrorCount",that.ruleCurrentErrorCount);
								wp.storeValue("ruleLastErrorTime",that.ruleLastErrorTime);

								if(Number(wp.getValue('ruleFirstErrorTime')) == 0){
								    wp.storeValue('ruleFirstErrorTime',new Date().getTime() + '');
								}

                                // 如果间隔时间超过账号单位错误时间，重置初始值
                                var times = (new Date().getTime() - Number(wp.getValue('ruleFirstErrorTime'))) / 1000;
								if(times > that.rulePerMaxUnit){
                                    that.ruleCurrentErrorCount = 0;
                                    wp.storeValue("ruleCurrentErrorCount",that.ruleCurrentErrorCount);
                                    wp.storeValue('ruleFirstErrorTime',new Date().getTime() + '');
                                }

                                if(that.ruleCurrentErrorCount >= that.ruleMaxErrorCount){
								    // 单位换算为秒
								    var diffTime = (new Date().getTime() - Number(wp.getValue('ruleFirstErrorTime'))) / 1000;
								    if(diffTime <= that.rulePerMaxUnit){
								        that.ruleCheckCode = true;
								        wp.storeValue('ruleCheckCode',1);
									}
								}

								if(data.code == '1001'){
                                    layer.msg("验证码错误");
									return;
                                }
								layer.msg(" 您的帐号或密码错误请检查");
                            }
						})
                    },
                    checkLastLoginErrorTime:function(){
                        var that = this;
                        function check(){
                            var lastErrorTime = wp.getValue('ruleLastErrorTime');
                            if(lastErrorTime){
                                var times = new Date().getTime() - Number(lastErrorTime);
                                var loginErrorResetTime = that.ruleResetErrorCountTime * 1000; // 转换毫秒
                                if(times >= loginErrorResetTime){
                                    that.ruleCurrentErrorCount = 0;
                                    that.ruleCheckCode = false;
                                    that.code = '';

                                    wp.removeValue("ruleCheckCode");
                                    wp.removeValue("ruleCurrentErrorCount");
                                    wp.removeValue("ruleLastErrorTime");
									wp.removeValue('ruleFirstErrorTime');
                                }
                            }
                        }

                        check();
                        if(!window.checkCodeInterval){
                            window.checkCodeInterval = window.setInterval(function(){
                                check();
                            },5000);
                        }
                    },
                    checkUserName:function(){
                        this.username = this.username.replace(/\s+/g, ''); // 去掉所有空格
                        if(!this.username){
                            this.checkInput = false;
							layer.msg("账户为空，请输入")
                            return false;
                        }

						var reg2 = /[<>&"']/im;  // 特殊字符校验
                        // 特殊字符校验
                        if (reg2.test(this.username)) {
                            this.checkInput = true;
                            // this.userNameError = this.$t('check_email_format_error');
							layer.msg("账号不能包含空格、< >、等特殊转义字符")
                            return false;
                        }

                        this.checkInput = true;
                        return true;
                    },
                    checkPassword:function(){
						this.password = this.password.replace(/\s+/g, ''); // 去掉所有空格
						if(!this.password){
							this.checkInput = false;
							// this.userNameError = this.$t("check_email_empty_label");
							layer.msg("密码为空，请输入")
							return false;
						}

						if(this.password.length<6||this.password.length>15){
							this.checkInput = false;
							// this.passwordError = this.$t('check_login_pwd_error_label');
							layer.msg("密码长度为6-15个字符，")
							return false;
						}
                    	// alert(this.password.length)
                        //至少包含一个数字
                        var reg = /(.*?)\d+(.*?)/;
                        var reg1=/^[0-9]*$/;
                        //不能包含空格
                        var reg3 = /^[^ ]+$/;
                        //不能包含转义字符
                        var reg2 = /[<>&"']/im;
                        var isSucc = reg.test(this.password) && reg3.test(this.password) && !reg2.test(this.password) && !reg1.test(this.password);
                        if(!isSucc) {
                            this.checkInput = false;
                            // this.passwordError = this.$t('check_login_pwd_error_label');
							layer.msg("密码必须同时由字母以及数字组成，不能包含空格、< >、等特殊转义字符")
                            return false;
                        }
                        this.checkInput = true;
                        return true;
                    },
                    checkCode:function(){
                        // 不检查验证码时直接返回
                        if(!this.ruleCheckCode) return true;
                        this.code = this.code.replace(/\s+/g, ''); // 赋值监控的临时值并去掉所有空格
                        if(!this.code) {
                           	layer.msg('请输入验证码');
                            return false;
                        }
                        return true;
                    }
                }
            });
        });

	</script>
</html>
